<template>
  <div>

    <el-card class="content scrollbar">
      <div class="add">
        <!-- <el-card class="lh28"> -->
        <div class="addOrderPopout">
          <div class="titleL">基本信息</div>
          <el-form ref="detail" :model="detail" :rules="rules" label-position="left">

            <el-form-item size="mini" label="药品名称" prop="drugName">
              <el-input
                v-model="detail.drugName"
                maxlength="30"
                show-word-limit
                class="w280"
                @keyup.native="inputPY(detail.drugName)"
              />
            </el-form-item>
            <el-form-item size="mini" label="药品类型" prop="drugTypeCode">
              <el-select v-model="detail.drugTypeCode" placeholder="请选择" class="w280">
                <el-option
                  v-for="item in options.drugTypeCode"
                  :key="item.drugTypeCode"
                  :label="item.drugTypeName"
                  :value="item.drugTypeCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item size="mini" label="药品分类">
              <el-cascader
                v-model="detail.drugCategoryCode"
                class="w280"
                :options="options.drugCategoryCode"
                :props="optionProps"
                clearable
              />

              <!-- <el-select v-model="detail.drugCategoryCode" placeholder="请选择" class="w280">
                <el-option
                  v-for="item in options.drugCategoryCode"
                  :key="item.drugCategoryCode"
                  :label="item.drugCategoryName"
                  :value="item.drugCategoryCode"
                />
              </el-select> -->
            </el-form-item>
            <el-form-item size="mini" label="通用名">
              <el-input v-model="detail.drugAlias" maxlength="30" show-word-limit class="w280" />
            </el-form-item>

            <el-form-item size="mini" label="规格名称">
              <el-input v-model="detail.drugSpecName" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="单位" prop="drugUnitCode">
              <el-select v-model="detail.drugUnitCode" placeholder="请选择" class="w280">
                <el-option
                  v-for="item in options.drugUnitCode"
                  :key="item.drugUnitCode"
                  :label="item.drugUnitName"
                  :value="item.drugUnitCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item size="mini" label="品牌">
              <el-select v-model="detail.brand" placeholder="请选择" class="w280">
                <el-option v-for="item in options.brand" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item size="mini" label=" 药品编码 " prop="drugCode">
              <el-input v-model="detail.drugCode" disabled maxlength="14" show-word-limit class="w280" />
            </el-form-item>
            <el-form-item size="mini" label=" 三方编码 ">
              <el-input v-model="detail.thirdCode" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label=" 助记码 ">
              <el-input v-model="detail.mnemonicCode" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label=" 零售价格 ">
              <el-input v-model="detail.drugPrice" class="w280" />
            </el-form-item>
            <div style="width: 100%">
              <div class="flex_cen mt20">
                <div class="titleL mb15">其他信息</div>
              </div>
            </div>
            <el-form-item size="mini" label="条形码">
              <el-input v-model="detail.drugBarCode" maxlength="30" show-word-limit class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="批准文号">
              <el-input v-model="detail.nmpn" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="是否为推广卡">
              <el-radio-group v-model="detail.isPopularizeCard">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item size="mini" label="生产厂家">
              <el-input v-model="detail.manufacturer" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="自定义字段1">
              <el-input v-model="detail.field1" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="自定义字段2">
              <el-input v-model="detail.field2" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="自定义字段3">
              <el-input v-model="detail.field3" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="自定义字段4">
              <el-input v-model="detail.field4" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="自定义字段5">
              <el-input v-model="detail.field5" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="自定义字段6">
              <el-input v-model="detail.field6" class="w280" />
            </el-form-item>
            <el-form-item size="mini" label="自定义字段7">
              <el-input v-model="detail.field7" class="w280" />
            </el-form-item>

          </el-form>
          <div class="footer tr">
            <el-button v-if="nameType != '详情'" type="primary" size="small" @click="createDetail('detail')">提 交
            </el-button>
            <el-button size="small" @click="returnUpper">返 回</el-button>
          </div>
        </div>
        <!-- </el-card> -->
      </div>
    </el-card>
  </div>
</template>

<script>

// import SidebarItem from './SidebarItem';
// import { getToken } from '@/utils/auth';
import vPinyin from '@/utils/vue-py.js';
import { drugAdd, updateDrug, getDrug, dictsTypeAllList, drugcategoryAllList, unitList } from '@/api/drugs';
import { brandPullList } from '@/api/brand';
class Detail {
  drugName = '';
  drugTypeCode = '';
  drugCategoryCode = '';
  drugAlias = '';
  drugSpecName = '';
  drugUnitCode = '';
  brand = '';
  drugCode = '';
  thirdCode = '';
  mnemonicCode = '';
  drugPrice = '';
  drugBarCode = '';
  nmpn = '';
  isPopularizeCard = 0;
  manufacturer = '';
  field1 = '';
  field2 = '';
  field3 = '';
  field4 = '';
  field5 = '';
  field6 = '';
  field7 = '';
}

class Rules {
  drugName = [{ required: true, message: '请输入药品名称', trigger: 'blur' }];
  drugTypeCode = [{ required: true, message: '请选择药品类型', trigger: 'change' }];
  drugCategoryCode = [{ required: true, message: '请选择药品分类', trigger: 'change' }];
  drugUnitCode = [{ required: true, message: '请选择单位', trigger: 'change' }];
  // drugCode = [{ required: true, message: '请选择药品编码', trigger: 'change' }];//20230309 张光照禁用不填
}
class Options {
  drugTypeCode = []
  drugCategoryCode = []
  brand = []
  drugUnitCode = []
  options = [
    { id: 1, name: '选项一' },
    { id: 2, name: '选项二' },
    { id: 3, name: '选项三' },
    { id: 4, name: '选项四' }
  ];
}
export default {
  components: {
  },
  data() {
    return {
      detail: new Detail(), // 分页
      options: new Options(), // 选项
      rules: new Rules(), // 表单校验
      nameType: '详情',
      optionProps: {
        value: 'drugCategoryCode',
        label: 'drugCategoryName',
        children: 'children',
        emitPath: false
      }
    };
  },

  mounted() {
    this.getOptions();
    this.nameType = this.$route.query.nameType;
    if (this.nameType != '新增') {
      this.getDetail();
    }
    // console.log(this.$route.query.nameType);
  },
  methods: {
    async getOptions() {
      const { data } = await dictsTypeAllList();
      // console.log(data);
      this.options.drugTypeCode = data;
      const res = await drugcategoryAllList();
      this.options.drugCategoryCode = res ? res.data : [];
      const brand = await brandPullList();
      this.options.brand = brand ? brand.data : [];
      const unit = await unitList({});
      // console.log(unit);
      this.options.drugUnitCode = unit ? unit.data : [];
    },
    async getDetail() {
      const { data } = await getDrug({ id: this.$route.query.id });
      this.detail = data;
      this.detail.drugPrice = this.common.centsToYuan(this.detail.drugPrice);
      // console.log(data);
    },
    inputPY(v) {
      this.detail.mnemonicCode = vPinyin.getPinYinFirstCharacter(v, '', true).replace(/\s+/g, '');
    },
    // 提交
    createDetail(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let hintText = this.nameType == '新增' ? `新增${this.detail.drugName}` : `修改${this.detail.drugName}`;
          this.hint('create', hintText);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 确认提示
    hint(status, hintText, row) {
      this.$confirm(`${hintText}, 是否确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          switch (status) {
            case 'create':
              this.submitBrand(row);
              break;
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    // 提交接口
    async submitBrand(row) {
      this.detail.drugPrice = parseInt(this.detail.drugPrice);
      this.detail.id = this.$route.query.id ? this.$route.query.id : '';
      let drugPrice = this.common.yuanToCents(this.detail.drugPrice);
      const res = this.nameType == '新增' ? await drugAdd({
        ...this.detail,
        drugPrice: drugPrice
      }) : await updateDrug({
        ...this.detail,
        drugPrice: drugPrice
      });
      this.$notification('操作成功', 'success', res.msg);
      this.returnUpper();
      // console.log(res);
    },
    // 取消按钮
    closeDialog() { },
    // 返回
    returnUpper() {
      this.$store.dispatch('tagsView/delView', this.$route);
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  background: #fff;
  .addOrderPopout {
    height: 80vh;
    // overflow-y: hidden;
  }
  .input {
    width: 100%;
  }
  .el-form-item {
    margin-bottom: 16px;
    width: 30%;
    ::v-deep.el-form-item__label {
      padding-bottom: 0;
      width: 20%;
      text-align: right;
    }
  }
  ::v-deep.el-dialog {
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
  ::v-deep.el-dialog__body {
    padding: 0 20px 100px;
    position: relative;
  }
}

.el-form--label-left {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  display: flex;
  margin-right: 30px;
}
.footer {
  // position: absolute;
  // right: 50px;
  // bottom: 80px;
}
</style>
